<template>
	<view class="details" :style="{paddingTop: paddingHeight + 'px'}">
		<nav-bar title="运动记录" backgroundColor="#FAFAFA"></nav-bar>
		<view class="container">
			<view class="date" v-if="date">
				{{ date.replaceAll('-','/') }}
			</view>
			<view class="data_l">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="goDetails(item.id)">
					<u-image width="64rpx" height="64rpx" :showMenuByLongpress="false" :src="item.icon"
						:lazy-load="true"></u-image>
					<view class="info">
						{{ item.sportProject }}
					</view>
					<view class="i-r">
						<text class="n-d">
							{{ item.durationTime }}
						</text>
						<text class="unit">
							分钟
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findSportDataByDay
	} from '@/api/index.js'
	export default {
		data() {
			return {
				paddingHeight: uni.getStorageSync('navbarHeight'),
				userId: uni.getStorageSync("userId"),
				date: undefined,
				dataList: [],
				page: 1,
				totalPage: 1
			}
		},
		onLoad(OPTIONS) {
			this.date = OPTIONS.date
		},
		onShow() {
			this.fetchData()
		},
		onReachBottom() {
			if (this.page >= this.totalPage) return
			this.page++
			this.fetchData()
		},
		methods: {
			async fetchData() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					page: this.page,
					size: 12,
					time: this.date,
					userId: this.userId
				}
				try {
					const res = await findSportDataByDay(params)
					if (res.code == 200) {
						this.dataList = [...this.dataList, ...res.data.list]
						this.totalPage = res.data.totalPage
					}
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			goRemark(id) {
				uni.navigateTo({
					url: `/pagesA/health/analyse/remark/index?id=${id}`
				})
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #FAFAFA;
		min-height: 100%;
	}
</style>
<style lang="scss" scoped>
	.details {
		.container {
			padding: 48rpx;

			.date {
				font-size: 24rpx;
				color: #333333;
				text-align: left;
				margin-bottom: 16rpx;
			}

			.data_l {
				.item {
					width: 100%;
					height: 118rpx;
					background: #FFFFFF;
					border-radius: 32rpx;
					padding: 0 48rpx 0 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16rpx;
					color: #666666;

					.info {
						flex: 1;
						padding-left: 16rpx;
						text-align: left;
					}

					.i-r {
						font-size: 32rpx;

						.n-d {
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
						}

						.unit {
							font-size: 20rpx;
							padding-left: 8rpx;
						}
					}
				}
			}
		}
	}
</style>